<template>
  <div class="person">

    <h2>需求：当水温达到60，或者水位到30，弹窗</h2>
    <h2>当前水温：{{ temp }}</h2>
    <h2>当前水位：{{ height }}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeheight">水位+10</button>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch ,watchEffect} from "vue"

//数据
let temp = ref(0)
let height = ref(0)

function changeTemp() {
  temp.value += 10
} 
function changeheight() {
  height.value += 10
}

// watch([temp, height], (newVal) => {
//   let [a, b] = newVal
//   if(a == 30){
//     alert('水温到了')
//   }
// })

watchEffect(()=>{
  if(temp.value==30){
    console.log('条件达到');
  }
})

</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
